<template>
  <div class="add">
    <el-steps :active="curStep" align-center class="step">
      <el-step title="填写申请信息"></el-step>
      <el-step title="填报本期完成工程量"></el-step>
      <el-step title="确认清单计量汇总表"></el-step>
    </el-steps>
  
    <!-- 步骤一，填写申请信息 -->
    <BaseForm 
      v-show="curStep === 0" 
      ref="base-form" 
      :info="projectInfo" 
      :cur-step="curStep" 
      @next="firstStepNext" 
      >
    </BaseForm>
    <!-- 步骤二，填报本期完成工程量 -->
     <CurrentPeriodQuantities
      v-show="curStep === 1"
      :id="id"
      :info="projectInfo" 
      :cur-step="curStep" 
      @back="curStep = curStep - 1" 
      @next="curStep = curStep + 1" 
      >
      </CurrentPeriodQuantities>
    
    <!-- 步骤三，确认清单计量汇总表 -->
    <MeasureSummary
     v-show="curStep === 2"
    :id="id"
    :cur-step="curStep" 
    @back="curStep = curStep - 1" 
    @next="curStep = curStep + 1" 
    >
    </MeasureSummary>
  </div>
</template>
<script>

import BaseForm from './BaseForm.vue'
import CurrentPeriodQuantities from './CurrentPeriodQuantities.vue'
import MeasureSummary from './MeasureSummary.vue'
import { ProjectLedgerModel } from '@/models'
export default {
    components: {
        BaseForm,
        CurrentPeriodQuantities,
        MeasureSummary
       
    },
    data() {
        return {
            curStep: 0,
            model: new ProjectLedgerModel(),
            projectInfo: {}, // 工程信息
            // formData: {}, // 步骤一表单信息
            pageType: 'add', // 编辑或者是新增
            id: '', // 申请id,编辑的时候使用
        }
    },
    created() {
        // 编辑
        const {id, pageType } = this.$route.query

        if (id && pageType === 'edit') {
            this.id = id 
            this.pageType = pageType
            this.getDetail()
        } else {
            // 新增
            const {id, project } = this.$route.query
            const { id: projectId, contractorName, highwayName, name, periodNumber} = JSON.parse(project)
            console.log('periodNumber', periodNumber)
            this.projectInfo = {
                projectId, contractorName, name, highwayName,
                periodNumber: periodNumber ? periodNumber + 1 : 1
            }
        }
    },
    methods: {
        firstStepNext(id) {
            this.curStep = this.curStep + 1
            this.id = id
        },
        secondStepNext(res) {
            this.$refs['project-inventory'].id = res.id
            this.curStep = this.curStep + 1
        },
        thrirdStepNext(id) {
            this.$refs['project-summary'].id = id
            this.curStep = this.curStep + 1
        },
        getDetail() {
            this.model.applicationDetail({id: this.id }).then(res => {
                const {
                    id,
                    projectId,
                    cycleStartDate,
                    cycleEndDate,
                    applicationInstructions,
                    attachment, 
                    applicantSignature,

                    constructionUnitName,
                    periodNumber,
                    highwayName,
                    projectName

                } = res
                this.$refs['base-form'].form = {
                    id,
                    projectId,
                    cycleStartDate,
                    cycleEndDate,
                    applicationInstructions,
                    attachment: JSON.parse(attachment), 
                    applicantSignature,
                    cycle: [cycleStartDate, cycleEndDate]
                }
                this.projectInfo = {
                    projectId,
                    highwayName,
                    periodNumber,
                    name: projectName,
                    contractorName: constructionUnitName
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
.add{
  width: 100%;
  height: 100%;
  ::v-deep
  {
    .el-step__head.is-process{
      color: #0162FF;
      border-color: #0162FF;
      .el-step__icon.is-text{
        color: #fff;
        background: #0162FF;
      }
      
    }
    .el-step__head.is-finish{
      .el-step__line{
        background-color: #0162FF;
      }
    }
    .el-step__title.is-process{
      color: #0162FF;
      font-weight: 500;
    }
  } 

}

</style>
